import React, { useEffect } from "react";
import UserHeader from "@/views/User/components/UserHeader/UserHeader";
import NavBar from "@/components/NavBar/NavBar";
import { Button, Modal } from "antd-mobile";
import Member from "@/views/User/components/Member/Member";
import Service from "@/views/User/components/Service/Service";
import { useEnhanceDispatch, useEnhanceSelector } from "@/hooks";
import { fetchUserInfoThunk } from "@/store/modules/userInfoStore";
import type { UserInfo } from "@/type/UserInfoType";
import { logout } from "@/store/modules/loginStore";
import { fetchOrderListThunk, fetchOrderStatusThunk } from "@/store/modules/orderStore";
import "./User.scss";

const User: React.FunctionComponent = () => {

   const enhanceDispatch = useEnhanceDispatch();
   const token: string = useEnhanceSelector(state => state.loginStore.loginData).token;
   const userInfo: UserInfo = useEnhanceSelector(state => state.userInfoStore.userInfo);

   /**
    * @description 点击退出登录按钮的回调函数
    * */
   const handleLogout = async () => {
      const result: boolean = await Modal.confirm({ content: "确认退出登录吗?" });
      if (!result) return;
      enhanceDispatch(logout());
   };

   useEffect(() => {
      if (!token) return;
      enhanceDispatch(fetchUserInfoThunk()).unwrap();
      enhanceDispatch(fetchOrderStatusThunk()).unwrap();
      enhanceDispatch(fetchOrderListThunk({ dataType: "all", page: 1 })).unwrap();
   }, []);

   return (
      <div className="user-container">
         <div className="header">
            <NavBar children="我的"></NavBar>
         </div>
         <div className="user-main">
            <UserHeader></UserHeader>
            <Member></Member>
            <Service></Service>
            {
               token && <div className="logout"><Button color="primary" onClick={handleLogout}>退出登录</Button></div>
            }
         </div>

      </div>
   );
};

export default User;
